<!DOCTYPE html>
<html>
<head>
    <style>
        div
        {
            /* 绝对定位 */
            position: absolute;
            width: 80px;
            height: 80px;
        }
        .one
        {
            background-color: blue;
            z-index: 2;
        }
        .two
        {
            top: 30px;
            left: 30px;
            background-color: aquamarine;
            z-index: 1;
        }
        .three
        {
            top: 60px;
            left: 60px;
            background-color: greenyellow;
            z-index: 0;
        }
        p
        {
            font-size: 25px;
            color: blue;
        }
        #myname
        {
            position: absolute;
            border: 5px solid black;
            width: 450px;
            height: 150px;
            left: 300px;
        }
    </style>
    <meta charset="UTF-8" />
    <title>定位的元素的层叠次序</title>
</head>
<body>
    <!-- 使用绝对定位实现 -->
     <div class="one">1</div>
     <div class="two">2</div>
     <div class="three">3</div>
     <div id="myname">
        <p>Z-index是层叠次序,有绝对定位时才能生效,数字越大,越前面</p>
    </div>
</body>
</html>